<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>贵阳轨道交通</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <META content="MSHTML 6.00.3790.4807" name=GENERATOR>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<meta http-equiv="x-dns-prefetch-control" content="on">
    
    <script type="text/javascript" src="./guiyang_subway_data.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ad17babae123cfc6568dd60e371ed512&plugin=AMap.Adaptor,AMap.Transfer,AMap.moveAnimation,AMap.Marker,AMap.Driving"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    
    <style>
      html,
      body,
      #container {
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
      } 
    </style>

</head>
<body>
 
<div id="container"  >
</div>

<script>
 var map = new AMap.Map("container", {
      //resizeEnable: true,
      center: [113.416979,31.721066],
      zoom: 30,
  }); 

var drivingOption = {
    policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
    ferry: 1, // 是否可以使用轮渡
    province: '鄂', // 车牌省份的汉字缩写 
    map: map
}

   // 构造路线导航类
    var driving = new AMap.Driving(drivingOption)

    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(113.416979,31.721066), new AMap.LngLat(106.784708,27.449092), function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
            console.info('绘制驾车路线完成', result);

            var all_paths = [];
            var steps = result.routes[0].steps;

            for(var i in steps) {
               
                var paths = steps[i].path;
                all_paths.push.apply(all_paths, JSON.parse(JSON.stringify(paths)));
            }

            var lineArr = all_paths;

             // 创建一个 Icon
            var yangyinIcon = new AMap.Icon({
                // 图标尺寸
                size: new AMap.Size(100, 96),
                // 图标的取图地址
                image: "./yangyin.png",
                // 图标所用图片大小
                imageSize: new AMap.Size(50, 48),
                // 图标取图偏移量
                imageOffset: new AMap.Pixel(-9, -3)
            });

           var marker = new AMap.Marker({
                map: map,
                position: [113.416979,31.721066],
                //icon: "https://webapi.amap.com/images/car.png",
                icon: yangyinIcon,
                offset: new AMap.Pixel(0, 0),
               // autoRotation: true,
                angle: -180,
            });

            // 绘制轨迹
            var polyline = new AMap.Polyline({
                map: map,
                path: lineArr,
                showDir:true,
                strokeColor: "#28F",  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            });

            var passedPolyline = new AMap.Polyline({
                map: map,
                // path: lineArr,
                strokeColor: "#AF5",  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            });

            marker.moveAlong(lineArr, 1000000);

            var cur_pos = [113.416979,31.721066];

            marker.on('moving', function (e) {
               passedPolyline.setPath(e.passedPath);
               cur_pos = e.pos;
            });

            setInterval(function() {
              // map.setCenter([cur_pos.lng, cur_pos.lat]); 

            }, 2000);

            map.setFitView();



        } else {
            console.info('获取驾车数据失败：' + result)
        }
    });


</script>
</body>
</html>